<template>
<div>
    <img class="title" src="../assets/title.png" alt="">
    <div id="pageIndex">
        <!-- <div class="btn-wrapper">
        <div class="btn-a" @click="show = true">
            监 测 <br /> 方 法
        </div>
        <div class="btn-a" @click.stop="toRecord">
            血 糖 <br /> 记 录
        </div>
    </div>
    <div class="clock" @click.stop="pickClock">
        打 卡
    </div> -->
    <div class="btn-group">
        <van-button type="primary" round size="large" plain @click="show = true">监 测 方 法</van-button>
        <van-button type="primary" round size="large" plain @click.stop="toRecord">记 录 血 糖</van-button>
        <van-button type="primary" round size="large" plain @click.stop="toLog">历 史 血 糖 记 录</van-button>
        <van-button type="primary" round size="large" plain @click.stop="toDashboard">血 糖 曲 线 图</van-button>
        <van-button type="primary" round size="large" plain @click.stop="pickClock">打 卡</van-button>
    </div>
    
    
    <!-- <div class="toLog">
        <router-link to="/log">血糖记录列表</router-link>
    </div> -->
    <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop="show = false">
            <div @click.stop="playplayVideo">
                <video id="videoPlay" v-if="show" class="video video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto" controls autoplay>
                <source :src="playUrl" /> Your browser does not support the video tag.
                </video>
            </div>
        </div>
    </van-overlay>
    </div>
</div>
    
</template>

<script>
import { Dialog, Toast } from 'vant'

export default {
    data() {
        return {
            show: false,
            playUrl: require('../assets/video.mp4')
        }
    },
    components: {
        [Dialog.Component.name]: Dialog.Component,
    },
    methods: {
        toRecord() {
            this.$router.push('/record')
        },
        toLog() {
            this.$router.push('/log')
        },
        toDashboard() {
            this.$router.push('/dashboard')
        },
        playVideo(){
            var vdo = document.getElementById("videoPlay");
            vdo.play();
        },
        getTmp() {
            var nowDate = new Date();
            var year = nowDate.getFullYear();
            var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
            : nowDate.getMonth() + 1;
            var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
            .getDate();
            var dateStr = year + month + day;
            return dateStr
        },
        pickClock() {
            let date = this.getTmp()
            let localData = localStorage.getItem(date)
            function beforeClose(action, done) {
                if (action === 'confirm') {
                    setTimeout(() => {
                        done()
                        Toast.success('打卡成功');
                    }, 1000);
                    localStorage.setItem(date, true)
                } else {
                    done();
                }
            }
            if (localData) {
                // 今日已打卡
                Toast.fail('今日已打卡');
            } else {
                // 未打卡
                Dialog.confirm({
                    // title: '标题',
                    message: '参与今日打卡',
                    beforeClose,
                })
            }
        }
    }
}
</script>

<style lang="less">
#pageIndex {
    width: 100%;
    height: 100vh;
    background: url('../../src/assets/bg.jpg') no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-flow: column wrap;
    // justify-content: center;
    align-items: center;
}
.btn-wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-around;
    position: relative;
    top: 30vh;
}
.btn-group {
    width: 100%;
    padding: 50px;
    // padding-top: 100px;
    box-sizing: border-box;
    position: relative;
    top: 20vh;
    .van-button--large {
        margin: 15px 0;
    }
}
.btn-a {
    display: inline-block;
    padding: 10px 15px;
    font-size: 26px;
    color: rgb(20, 198, 204);
    background-color: white;
    border-radius: 8px;
}
.clock {
    width: 86px;
    height: 86px;
    line-height: 86px;
    border-radius: 43px;
    color: rgb(20, 198, 204);
    background-color: white;
    font-size: 26px;
    text-align: center;
    font-weight: 700;
    margin: 0 auto;
    position: relative;
    top: 48vh;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}
video {
    width: 100%;
}
.toLog {
    position: relative;
    top: 56vh;
    text-align: center;
}
a {
    font-size: 20px;
    text-decoration: underline;
}
.title {
    width: 80%;
    position: absolute;
    left: 10%;
    top: -50px;
}
</style>